<template>
    <view>
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">修改账号信息</block>
        </cu-custom>

        <view class="cu-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="cuIcon-titles text-green"></text> 昵称
            </view>
        </view>
        <view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
            <view class="cu-item">
                <view style="display:flex;flex-direction:row;align-items:center;">
                    <input class="text-black" ref="name" :value="currentUser.username" @input="onInputUsername"/>
                </view>
            </view>
        </view>

        <view class="cu-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="cuIcon-titles text-green"></text> 头像
            </view>
            <view class="action">
                <button class="cu-btn bg-green shadow" @click="choose">选择图片</button>
            </view>
        </view>
        <view class="cu-bar bg-white solid-bottom justify-center">
            <view class="cu-avatar xl round margin-top margin-bottom"
                :style="'background-image:url(' + (choosepic==''?currentUser.avatar:choosepic) + ');'"/>
        </view>

        <view style="text-align: center;margin-top: 20rpx;">
            <button class="cu-btn bg-green shadow" @click="submit">提交修改</button>
        </view>
    </view>
</template>

<script>
import {USER_API} from '@/API.js';
import {COMMON_API} from '@/API.js';
export default {
    data() {
        return {
            currentUser: {
                'uuid': 'uuid',
                'username': '',
                'avatar': ''
            },
            choosepic: ''
        };
    },
    onLoad() {
        console.log('modifyName.vue: onLoad');

        uni.request({
            url: USER_API.user.url,
            method: USER_API.user.method,
            header: {'http-token': this.getToken()},
            success: function(res) {
                console.log('账号信息获取成功');
                this.currentUser = res.data;

            }.bind(this)
        });
    },
    methods: {
        onInputUsername: function(e) {
            this.currentUser.username = e.target.value;
        },
        submit: function() {
            if (this.choosepic == '') {
                uni.request({
                    url: USER_API.putUser.url,
                    method: USER_API.putUser.method,
                    header: {'http-token': this.getToken()},
                    data: this.currentUser,
                    success: function(res) {
                        if (res.statusCode == 200) {
                            uni.showToast({
                                title: '修改成功'
                            });
                            setTimeout(function() {
                                uni.navigateBack({});
                            }, 1000);
                        } else {
                            uni.showToast({
                                title: '修改失败',
                                duration: 2000
                            });
                        }
                    }.bind(this)
                });
            }
            else {
                uni.uploadFile({
                    url: COMMON_API.uploadPic.url,
                    filePath: this.choosepic,
                    file: this.choosepic,
                    name: 'file',
                    header: {
                        'http-token': this.getToken(),
                        'Content-Type': 'multipart/form-data'
                    },
                    success: function(res) {
                        this.currentUser.avatar = JSON.parse(res.data).path;
                        uni.request({
                            url: USER_API.putUser.url,
                            method: USER_API.putUser.method,
                            header: {'http-token': this.getToken()},
                            data: this.currentUser,
                            success: function(r) {
                                if (r.statusCode == 200) {
                                    uni.showToast({
                                        title: '修改成功'
                                    });
                                    setTimeout(function() {
                                        uni.navigateBack({});
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: '修改失败',
                                        duration: 2000
                                    });
                                }
                            }.bind(this)
                        });
                    }.bind(this),
                    fail: function(res) {
                        console.log(res);
                    }
                });
            }
        },
        choose: function() {
            uni.chooseImage({
                count: 1,
                sizeType: 'original',
                success: function(res) {
                    console.log(res.tempFilePaths[0]);
                    this.choosepic = res.tempFilePaths[0];
                }.bind(this)
            });
        }
    }
};
</script>

<style>
</style>
